<!-- 服务区 -->
<script>
import { defineComponent } from 'vue';
import SupermapCard from "@/components/SupermapCard/index.vue";
import Api from '@/Api'

export default defineComponent({
  name: "Section-3",
  components: {
    SupermapCard
  },
  setup() {
  },
  data() {
    return {
      total: 0,
      title: '雨污分流混节点总数'
    }
  },
  mounted() {
    this.getData();
  },
  watch: {
  },
  computed: {
  },
  beforeRouteLeave() { },
  methods: {
    // 获取数据
    async getData() {
      const res = await Api.getMixFeature();
      if (!res.features || !res.features.length) { return }
      this.initChart(res.features);
    },
    // 初始化图表
    initChart(data) {
      const obj = {};
      this.total = data.length;
      for (let i = 0; i < data.length; i++) {
        const item = data[i];
        const value = item.fieldValues[0];
        obj[value] = !obj[value] ? 1 : obj[value] + 1;
      }
      const arrData = Object.keys(obj).map(v => {
        return {
          value: obj[v],
          name: v
        }
      })
      const dom = document.getElementById("echart-section-3");
      if (!dom) { return }
      const chartIns = echarts.init(dom);
      const option = {
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            data: arrData,
            label: {
              formatter: function (params) {
                return params.name + '\n\n' + params.value + '个' + ',' + params.percent + '%'
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      if (option && typeof option === 'object') {
        chartIns.setOption(option);
      }
    },
    emitFunc() {
      this.getData();
    }
  }
});
</script>
<template>
  <div class="section section-three">
    <supermap-card @emitFunc="emitFunc" :title="title" :width="350" :top="70" :right="20" :height="36" :bottom="20"
      :shouldDrag="true">
      <div class="main-title">
        <div class="inner">
          雨污分流混接点
          <span class="weight">{{ total }}</span>
          个
        </div>
      </div>
      <div id="echart-section-3"></div>
    </supermap-card>
  </div>
</template>
<style scoped lang="less">
.section-three {
  position: absolute;
  top: 10.3rem;
  right: 1rem;
  width: 43rem;
}
.main-title {
  height: 5rem;
  background-color: rgba(224, 233, 246, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  & > .inner {
    padding: 0 4rem;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    color: #666;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 0 center, right 0 center;
    background-image: url(@/assets/images/time-slider/icon-arrow-left.png),
      url(@/assets/images/time-slider/icon-arrow-right.png);
  }
}
.weight {
  font-weight: bold;
  color: #000;
  padding: 0 5px;
}

#echart-section-3 {
  height: 35rem;
  background-color: rgba(224, 233, 246, .8);
}
</style>